<script setup>

import {Message, Upload} from "@element-plus/icons-vue";

function person() {
  console.log("个人信息")
}
function setting() {
  console.log("设置")
}
function exit() {
  window.sessionStorage.clear()
  console.log("退出登录")
}
// 暗黑模式
import { useDark, useToggle } from '@vueuse/core';

// useDark()可以获取当前的主题模式是不是暗黑模式，返回的是布尔值
const isDark = useDark();

// useToggle()类似于开关，能将useDark()取反，实现主题模式切换效果
const toggleDark = useToggle(isDark);

// # 弹出框
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'

const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}

// #文本
const textarea = ref('')
import {watch} from "vue";
//上传
import { UploadFilled } from '@element-plus/icons-vue'
// 设置在提交信息
let yesload = ref(false)
watch(textarea, (newValue) => {
  yesload.value = newValue.trim() !== '';
});
import { ElNotification } from 'element-plus'
import axios from 'axios'

const submit = () => {
  if (yesload.value) {
    // 发送 POST 请求
    axios.post('http://localhost:9090/api/feedback', {
      feedback: textarea.value // 将文本域的值作为反馈内容发送
    })
        .then(res => {
          console.log(res.data); // 输出响应数据
          // 弹出成功通知
          ElNotification({
            title: 'Success',
            message: '提交成功',
            type: 'success',
          });
          textarea.value = '';  // 清空文本域
          popoverRef.value.hide(); // 隐藏弹出框
        })
        .catch(err => {
          console.error('请求失败：', err);
          // 弹出错误通知
          ElNotification({
            title: 'Error',
            message: '提交失败',
            type: 'error',
          });
        });
  }
};

function handleCancel() {
  textarea.value = '';  // 清空文本域
  popoverRef.value.hide();
}


</script>

<template>

  <!--  弹出框 https://element-plus.org/zh-CN/component/popover.html-->
  <el-popover
      ref="popoverRef1"
      trigger="click"
      title="With title"
      virtual-triggering
      persistent>
    <span> Some content </span>
  </el-popover>

  <!--  <button id="showPopup" onclick="showPopup()">弹出</button>-->
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <el-row class="header-1">
          <el-col :span="12" >
            <a href=""><img class="img" src="../img/root-removebg-preview.png" alt=""></a>
          </el-col>
          <div class="flex-grow" />
          <!--        暗黑模式设置 https://blog.csdn.net/ymzhaobth/article/details/125521766#:~:text=%E9%80%9A%E8%BF%87%E5%9C%A8html%E6%A0%87%E7%AD%BE%E4%B8%8A%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E5%90%8D%E4%B8%BA%20dark%20%E7%9A%84%E7%B1%BB%E6%9D%A5%E5%90%AF%E7%94%A8%20%E5%9F%BA%E4%BA%8E%20vue3%20%26%20element-plus%20%E7%9A%84%E9%A1%B9%E7%9B%AE%E7%8E%B0%E5%9C%A8%E5%8F%AF%E4%BB%A5%E6%96%B9%E4%BE%BF%E7%9A%84%E6%B7%BB%E5%8A%A0%E6%9A%97%E9%BB%91%E6%A8%A1%E5%BC%8F,%E4%BD%86%E4%B8%BA%E4%BA%86%E6%96%B9%E4%BE%BF%E5%88%87%E6%8D%A2%E4%BB%A5%E5%8F%8A%E8%BF%9B%E4%B8%80%E6%AD%A5%E7%9A%84%E5%AE%9A%E5%88%B6%E5%8C%96%EF%BC%8C%E5%AE%98%E6%96%B9%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8%20useDark%20%7C%20VueUse%20%E7%A4%BA%E4%BE%8B%EF%BC%9A%E4%BB%A5%E4%B8%8B%EF%BC%8C%E5%9F%BA%E4%BA%8E%20element-plus%20switch%E7%BB%84%E4%BB%B6%20%E5%88%9B%E5%BB%BA%E4%BA%86%E4%B8%80%E4%B8%AA%E6%9A%97%E9%BB%91%E6%A8%A1%E5%BC%8F%E5%BC%80%E5%85%B3%E7%BB%84%E4%BB%B6%EF%BC%8C%E5%B0%86%E5%AE%83%E6%94%BE%E5%85%A5%E8%8F%9C%E5%8D%95%E6%A0%8F%EF%BC%8C%E5%B0%B1%E5%8F%AF%E4%BB%A5%E6%96%B9%E4%BE%BF%E5%9C%B0%E5%88%87%E6%8D%A2%E6%A8%A1%E5%BC%8F%E4%BA%86 -->
          <span @click.stop="toggleDark()" ></span>
          <!--        功能反馈-->
          <el-switch size="small" v-model="isDark" class="toolbar"/>
          <el-popover
              ref="popoverRef"
              trigger="click"
              title="请输入产品功能问题及改进建议"
              virtual-triggering
              persistent
              width="290"
          >
            <el-input
                v-model="textarea"
                style="width: 263px"
                :rows="2"
                type="textarea"
                placeholder="请输入您的意见/建立（200字以内）"
            />
            <el-upload
                class="upload-demo"
                drag
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                <el-icon><Upload /></el-icon> <em>上传图片</em>
              </div>
            </el-upload>
            <span class="button-right">
              <el-button @click="handleCancel">取消</el-button>
              <el-button
                  plain @click="submit"
                  :class="{'is-active': yesload}"
                  :disabled="!yesload">提交</el-button>
            </span>
          </el-popover>

          <el-button class="header-button"  v-popover="popoverRef" v-click-outside="onClickOutside">
            <el-icon size="20" ><Message /></el-icon>
            <span >功能反馈</span>

          </el-button>

          <!--        # 设置功能-->
          <div class="toolbar">
            <el-dropdown>
              <img src="../img/human9.png" class="img">
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="person">个人信息</el-dropdown-item>
                  <el-dropdown-item @click="setting">设置</el-dropdown-item>
                  <a href="/"><el-dropdown-item @click="exit">退出登录</el-dropdown-item></a>

                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-row>

      </el-header>
      <!--      # 设置横行-->
      <el-divider border-style="double" />
      <el-container>
        <el-aside class="left">
          <el-container>
              <span class="userBooks">
                <strong>叽里</strong>咕噜 <strong>使用手册</strong>
                <br>
               <el-divider border-style="double" />
                <!--                let userBooks = ["一、什么是叽里咕噜", "二、3分钟学会叽里咕噜指令", "三、叽里咕噜进阶应用指南", "四、叽里咕噜团队介绍"]-->
                <a  href="/about">一、什么是叽里咕噜<br><br></a>
                <a  href="/about1">二、3分钟学会叽里咕噜指令<br><br></a>
                <a  href="/about2">三、叽里咕噜进阶应用指南<br><br></a>
                <a  href="/about3">四、叽里咕噜团队介绍<br><br></a>

              </span>
          </el-container>
        </el-aside>
        <el-main class="main">
          <el-header class="main-header">
            <el-row class="row-bg" justify="row-bg">
              <el-col :span="20"><div class="grid-content ep-bg-purple" /><h1>
                三、叽里咕噜进阶应用指南
              </h1>
                <p class="update-time">更新时间：2024-07-05</p>
                <p class="text">在面对复杂难解的任务时，一条简单的指令力量难免有些单薄。其实叽里咕噜还有更高阶的能力待你来解锁，我们可以选择通过补充更多指令内容、运用更高级的指令技巧让指令完成进阶从而应对更复杂的任务；也可以将复杂的任务拆解，分而治之，逐一攻破。如果你还有些困惑，那就继续往下看，带你从入门到进阶。</p>
              </el-col>
              <el-divider border-style="double" />
              <el-col :span="20"><div class="grid-content ep-bg-purple" /><h2 id="index1">
                （一）叽里咕噜进阶版（Prompt）写作方法论
              </h2>
                <p class="text">
                  任务：是对叽里咕噜所要处理内容的清晰描述。可以理解为类似一种固定话术。 往往采取【根据】+【动作】+【目标】的形式进行。例如：【根据】依据会议记录内容，【动作】总结会议待办事项，并【目标】指明每个待办事项的负责人。
                </p >
                <p class="text">
                  输出要求：清晰且具体说明所期望得到的最终结果或输出内容。 包括且不限于回复答案的标准、完成任务所需的步骤、用户对模型输出结果附加的风格要求、格式要求及字数要求等。
                </p>
                <p class="text">
                  输出项：用于在指令末端引导叽里咕噜开始输出结果。 可以在指令末端输入例如“回答：”、“输出：”、“总结：”等具有开启输出命令效果的词语。同时要注意这些词语应与指令中任务、示例部分给到的一致。
                </p>
                <p class="text">
                  要求：需要叽里咕噜遵循的任务细节要求，如：按XX格式输出、按XX语言风格撰写等
                </p>
              </el-col>
              <el-col :span="20"><div class="grid-content ep-bg-purple" /><h2 id="index2">
                （二）多轮优化，步步精进
              </h2>
                <p class="text">在和叽里咕噜进行对话的过程中，你可能会遇到以下情形：当你请求它为你制定一份旅游出行攻略时，你可能希望在规划好的行程之外，再获得一些小众景点的推荐；当你需要它帮你撰写一篇发言稿时，你可能想在完整的框架之上，再增添一些富有文采的句子；当你希望它为你制定一个学习计划时，你可能期望计划能更贴合自己的学习习惯和生活作息......</p>
                <p class="text">在我们输入指令后，叽里咕噜的单轮初次回应可能并未完全达到我们的预期。然而，不必急于开启新的对话。叽里咕噜强大的上下文理解能力可以确保我们在多轮对话中不断优化生成的内容，逐步实现最终的完美答案。而要做到这一点，关键在于我们如何步步精进我们的提问，从更细致、更严格的角度来向叽里咕噜提问。</p>
                <p class="text">无论你是程序员、设计师、教师、影视编导，还是需要兼具创意和执行力的广告人、自媒体、作家、写手，你都可以让叽里咕噜成为你的专属打工人。</p>
                <p class="text">以撰写直播带货话术为例，由于直播带货涉及众多商品及卖点，其多样性导致叽里咕噜在单次生成内容时难以满足个性化需求。我们可以通过逐步优化，最终获得满意的输出答案。接下来让我们一同来体验一下这个过程吧。！</p>
              </el-col>
              <el-col :span="20"><div class="grid-content ep-bg-purple" /><h2 id="index3">
                （三）复杂任务，分而治之
              </h2>
                <p class="text">你是否曾面对着论文提交的Deadline不知从何下手，你是否曾面对着冗长复杂的公司财报头晕眼花，你是否曾面对着层出不穷的bug冥思苦想……</p>
                <p class="text">当我们难以通过单条指令一次性解决复杂的任务时，不妨试着将一个复杂任务拆解成多个连续的简单子任务，让叽里咕噜大模型4.0逐步执行每个子任务，并最终实现复杂任务的完成。</p>
                <p class="text">以论文应用为例，复杂的任务过程让模型很难一则指令解决全部需求。这时我们按照真实生活中论文写作所面对的难题，将一篇论文从选题到诞生的全过程拆解为前期输入（读文献、拟大纲）、中期撰写（定量分析、翻译）、后期升华（润色、精炼、答辩辅助）多个子任务。话不多说，一起看看吧。</p>

                <p class="text"><strong>网络检索问答</strong><p class="text">对百度、Bing的搜索结果摘要进行答案的检索</p>
                  <p class="text li">百度搜索，包括百度知识图谱、百度诗词、百度万年历、百度计算器、百度知道</p>
                  <p class="li">微软Bing搜索，包括bing知识图谱、bing网典</p></p>
                <p class="text"><strong>任务型对话</strong><p class="text li">End to End Memory Networks(memn2n)<p class="text li">BABi dataset</p></p></p>
                <p class="text"><strong>聊天型对话</strong><p class="li text">GPT2 Model</p ><p class="li text">Sequence To Sequence Model(seq2seq)</p><p class="li text">Taobao dataset</p></p>
              </el-col>

            </el-row>
          </el-header>
        </el-main>

        <el-aside class="right">

        <span class="right-text">

          <br>
          <a href="#index1" class="jianjie">一、叽里咕噜进阶版（Prompt）写作方法论</a><br>
          <a href="#index2" class="jianjie">二、多轮优化，步步精进</a><br>
          <a href="#index3" class="jianjie">三、复杂任务，分而治之</a><br>
        </span>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped>
.el-button.is-active {
  background-color: #409EFF;
  border-color: #409EFF;
  color: #fff;
}

.el-button:disabled {
  background-color: #dcdfe6;
  border-color: #dcdfe6;
  color: #c0c4cc;
}
.button-right {
  float: right;
  margin-right: 20px;
}

.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  right: 20px;
  height: 35px;
  width: 50px;
  text-align: center;
  border: 0; /* 设置边框为0，这样就没有边框了 */
}
.li {
  text-indent: 20px;
  font-size: 12px;
  font-family: 华文仿宋;
}

a {
  text-decoration: none;
  font-family: 黑体;
  font-size: 15px;
}
h2 {
  font-size: 20px;
  font-family: "微软雅黑";
}
.text {
  margin: 1em 0;
  font-size: 12px;
  font-family: 微软雅黑;
}
.userBooks{
  padding: 50px;
}
.update-time {
  font-size: 12px;
  font-family: 宋体;
}
.jianjie {
  font-size: 15px;
  font-family: 华文仿宋;
}
.right-text {
  float: left;
}
.header-1 {
  padding: 15px;
}
.header {
  height: 35px;
}
h1 {
  font-size: 35px;
  font-family:华文仿宋;
}

.header-button {

  height: 35px;
  width: 100px;
  text-align: center;
  border: 0; /* 设置边框为0，这样就没有边框了 */
}
.img {
  height: 35px;
  width: auto;
}
.flex-grow {
  flex-grow: 1;
}

.left {
  /* 设置行内快  https://blog.csdn.net/ke1ying/article/details/102676638*/
  width: 20%;
}
.main {
  width: 60%;
  height: 93vh;
}
.right{
  /*沾满总页 https://geek-docs.com/css/css-ask-answer/133_css_make_body_have_100_of_the_browser_height.html*/
  width: 20%;
}

</style>
